<template>
  <div>
    <el-button style="
        background-color: rgb(44, 181, 172);
        font-size: 12px;
        color: #ffffff;
      " size="small" @click="open">新增</el-button>
    <!-- 弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="hospital">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="hospital.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="hospital.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="省市区" :label-width="formLabelWidth">
          <el-cascader v-model="hospital.area" :options="pca"
            :props="{ expandTrigger: 'hover' , label: 'name', value: 'name'}" @change="handleChange"></el-cascader>

        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="hospital.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="经度" :label-width="formLabelWidth">
          <el-input disabled v-model="hospital.longitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="纬度" :label-width="formLabelWidth">
          <el-input disabled v-model="hospital.latitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择经纬度" :label-width="formLabelWidth">
          <el-button @click="show_map" class="bg">打开地图</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save_hospital">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 地图模态框 -->
    <el-dialog :title="title_map" :visible.sync="dialogFormVisible_map">
      <div id="Map" style="height:400px"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible_map = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 表单 -->
    <el-table :data="hospitalList" style="width: 100%">
      <el-table-column prop="id" label="序号" align="center"> </el-table-column>
      <el-table-column prop="name" label="医院名称" align="center">
      </el-table-column>
      <el-table-column prop="address" label="医院地址" align="center">
      </el-table-column>
      <el-table-column prop="introduce" label="简介" align="center">
      </el-table-column>
      <el-table-column prop="flags" label="标记" align="center">
      </el-table-column>
      <el-table-column prop="longitude" label="经度" align="center">
      </el-table-column>
      <el-table-column prop="latitude" label="纬度" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button @click="edit_hospital(scope.row)" size="small" type="primary" icon="el-icon-edit"></el-button>
          <el-button @click="delete_hospital(scope.row)" size="small" type="danger" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="obj.pageSize" :current-page="obj.page"
      @current-change="change" :total="hospitalTotal"></el-pagination>
  </div>
</template>

<script>
  import pca from "../../assets/pca.json";
  import {
    mapActions,
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        pca,
        formLabelWidth: "120px",
        dialogFormVisible: false,
        hospital: {},
        obj: {
          page: 1,
          pageSize: 10,
        },
        title: "新增医院",
        title_map: '选择地点',
        dialogFormVisible_map: false,
        map: {}
      };
    },
    watch: {
      obj: {
        handler: function () {
          this.findAllHospital(this.obj);
        },
        deep: true,
      },
    },
    computed: {
      ...mapState("hospital", ["hospitalList", 'hospitalTotal']),
    },
    created() {
      this.findAllHospital(this.obj);
    },
    methods: {
      ...mapActions("hospital", [
        "saveHospital",
        "findAllHospital",
        "deleteHospital",
      ]),
      open() {
        this.hospital = {};
        this.dialogFormVisible = true;
      },
      save_hospital() {
        this.title = "新增医院";
        this.hospital.province = this.hospital.area[0];
        this.hospital.city = this.hospital.area[1];
        this.hospital.area = this.hospital.area[2];
        this.saveHospital(this.hospital).then((res) => {
          this.findAllHospital(this.obj);
        });
        this.hospital = {};
        this.dialogFormVisible = false;
      },
      delete_hospital(id) {
        var obj = {
          id: id.id,
        };
        this.deleteHospital(obj).then((res) => {
          this.findAllHospital(this.obj);
        });
      },
      edit_hospital(id) {
        this.dialogFormVisible = true;
        // 2. 将当前行数据放入模态框
        this.hospital = JSON.parse(JSON.stringify(id));
        this.title = "修改医院";
      },
      handleChange() {

      },
      change(page) {
        this.obj.page = page;
      },
      show_map() {
        this.dialogFormVisible_map = true;
        setTimeout(() => {
          this.initMap();
          this.clickOn();
        }, 1000)

      },
      initMap() {
        this.map = new AMap.Map("Map", {
          resizeEnable: true
        });

      },
      //获取经纬度
      showInfoClick(e) {
        this.hospital.longitude = e.lnglat.getLng();
        this.hospital.latitude = e.lnglat.getLat()
      },
      //给地图绑定单击事件
      clickOn() {
        this.map.on('click', this.showInfoClick);
      }
    },
  };

</script>
<style>
  .bg {
    color: #fff;
    background-color: #2cb5ac;
  }

</style>
